<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            display: block;
            margin: 0 auto;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <img data-lazy-src="https://picsum.photos/500/300?image=100" />
    <img data-lazy-src="https://picsum.photos/500/300?image=101" />
    <img data-lazy-src="https://picsum.photos/500/300?image=102" />
    <img data-lazy-src="https://picsum.photos/500/300?image=103" />
    <img data-lazy-src="https://picsum.photos/500/300?image=104" />
    <img data-lazy-src="https://picsum.photos/500/300?image=105" />
    <img data-lazy-src="https://picsum.photos/500/300?image=106" />

    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="./js/EasyLazyload.js"></script>
    <script>
        lazyLoadInit({
            coverColor: "white",
            coverDiv: "<h1>test</h1>",
            offsetBottom: 0,
            offsetTopm: 0,
            showTime: 1100,
            onLoadBackEnd: function (i, e) {
                console.log("onLoadBackEnd:" + i);
            },
            onLoadBackStart: function (i, e) {
                console.log("onLoadBackStart:" + i);
            }
        });
    </script>

<script>
    refresher.init({
        id:"wrapper",
        pullDownAction:Refresh,                                                            
        pullUpAction:Load 																			
        });																																							
    function Refresh() {																
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;																		
            el =document.querySelector("#wrapper ul");					
            //这里写你的刷新代码				
            document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";		
            document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="<img src='css/ok.png'/>刷新成功";																					 
            setTimeout(function () {
                wrapper.refresh();
                document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="";								
                },1000);//模拟qq下拉刷新显示成功效果
            /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
        }, 1000);
    }
    function Load() {
        setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            for (i=0; i<2; i++) {
                li = document.createElement('li');
                li.innerHTML="<div class='game-info'><h1>在很多环境中，jQuery 2.0 应当都表现的很好。</h1><p>2015-10-27</p></div>"
                el.appendChild(li, el.childNodes[0]);
            }
            wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
        },1000);	
    }
    </script>
</body>

</html>